<template>
<div class="cart">

    <div class="cart-all">
        <div class="cart-all-quanxuan">
        <table v-if="cart.length!==0">
            <input 
            :checked="isAllChecked" 
            type="checkbox"
            @change="totalChecked"
           />全选</table>
        </div>
      <!-- 空的时候 -->
      
      <div  v-if="cart.length!==0" class="cart-all-table"  v-for="item of cart" :key="item.id">
              <div class="ico">
                  <input type="checkbox" 
              :checked="item.isChecked"
                 @change="changeCartCheck(item.id)"
              
              /></div>
            <div class="img"><img src="../assets/cart1.jpg"/></div>
             <div class="tt">
               <!-- <p>老粗布花鸟印花凉席三件套（颜色：落春、尺寸：1.5米床）</p> -->
               <p>{{item.title}}</p>
               <p>单价：￥{{item.price}}</p>
               <div class="row">
                   <div class="row-lef">
                  <span @click="cut(item.id)">-</span>
                 <span>{{item.count}}</span>
                  <span  @click="add(item.id)">+</span>
                  </div>
                      <span  @click="handClick(item.id)"> 删除</span>
                  
                </div>
            </div>
            
      </div>
      <div v-if="cart.length===0" class="empt">
          <img class="empt-img" src="@/assets/dongman.png"/>
        <p  class="empt-pp">空的</p>
        <mt-button @click="$router.push('/menu')" class="empt-but" type="primary" size="large">买买买</mt-button>
      </div>
    <div class="foo">
      <p class="foo-vvv">猜你喜欢</p>
      <div class="cart-swiper">
       <mt-swipe  :showIndicators="false" >
            <mt-swipe-item class="ccc"
              v-for="list of  items"
               :key="list.id"
               > <img :src="list.img" @click="$router.push('/menu')"/>
              <p> {{list.title}}</p>
              <span>￥{{list.price}}</span>
               </mt-swipe-item>
         </mt-swipe>
      </div>
     </div>
    </div>
       
   <!-- 底部 -->
     <ul class="ul">
          <li class="ul-f-a" ><span>合计：￥{{tatalChecked}}</span></li>
          <li class="ul-f-c" ><span  @click="$router.go(-1)">送心意</span></li>
          <li class="ul-f-d"><span  @click="$router.push('/mine')">去结算</span></li>
      </ul>
   </div>   
</template>

<script>
import {mapState,mapMutations,mapGetters} from 'vuex'
import { Button ,Swipe, SwipeItem } from 'mint-ui';

export default {
   
    methods:{
         ...mapMutations(['add','cut','handClick','changeCartCheck','totalChecked'])
        
    },
    computed:{
          ...mapState(['cart','checkedCartItems']),
          ...mapGetters(['tatal','isAllChecked','tatalChecked']),
     
    },
 created(){
  console.log(this)
    this.$http.get('http://rap2api.taobao.org/app/mock/86910/api/cart_swiper')
            .then(resp=>{
         
                this.items=resp.data.data
            })
    },
    components:{
        'mt-button':Button,
         'mt-swipe':Swipe,
       'mt-swipe-item':SwipeItem
 },
 data(){
     return {
         items:[]
     }
 }
}
</script>

<style lang="scss" scoped>
body{
        background: #efefef;
}
  .ul{
      height: 58px;
        display: flex;
        width: 100%;
        position: fixed;
        bottom: 0;
        &-f{
            &-a,{
                width:207px;
                background:#efefef;
                text-align: center;
                font-size:12px;
                    span{
                    color: #d9534f;
                    font-size: 16px;
                    font-weight: bold;
                    line-height: 60px;
                }
            }
           &-c,&-d{
              width: 100px;
              background: #f06292;
              color: #fff;
              text-align: center;
              padding: 15px;
           } 
        }
    }
    .ul-f-c {
               border-right: 1px solid #919191;
           }
   .cart{
       height: 100%;
       width: 100%;
       overflow: hidden;
       &-all{
           overflow-x: hidden;
           height: 100%;
       }
    }        

.cart-all-quanxuan{
        height: 30px;
   
}
.cart-all-table{
     height: 140px;
     border-bottom: 1px solid black;
    display: flex;
    justify-content: space-between;
   
     .ico{
          height: 50px;
          margin-top:50px;
        margin-left: 20px;
     }
     img{
         height: 73px;
         width: 73px;
           margin-top:27px;
     }
     .tt{
         width: 241px;
         height: 149px;
             margin-top:27px;
           p{
                   margin: 0 0 10px;
           }
            .row{
                display: flex;
                justify-content: space-between;
                    &-lef{
                           position: relative;
                            display: table;
                            border-collapse: separate;
                          span{
                              padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
                          }  
                          input{
                             position: relative;
                             width: 24%;
                             margin-bottom: 0;
                                    height:20px;
                                padding: 6px 12px;
                                font-size: 14px;
                                line-height: 1.42857143;
                                color: #555;
                                background-color: #fff;
                                background-image: none;
                                border: 1px solid #ccc;
                                display: table-cell;
                          }
                    }

            }
     }
   }
   .foo{
           line-height: 30px;
    text-align: center;
    position: relative;
    margin: 0 0 10px;
       &-vvv{
            height: 30px;
            margin-top: 20px;
            margin-bottom: 10px;
        }
   }
   .empt{
       height: 284px;
       position: relative;
     
       &-img{
           height: 110px;
           width: 80px;
            margin-left: 161px;
        margin-top: 58px;
    margin-bottom: 20px;
       }
       &-pp{
           height: 15px;
           padding: 5px;
           padding: 19px;
           margin-left: 150px;
       }
     
   }
  .cart-swiper{
      height:220px;
      width: 100%;
    }
  .ccc{
      height: 200px;
      width: 162px;
      display: flex;
      flex-direction: column;
  }
</style>
